import XtxHomePanel from "@/components/library/xtxHomePanel";
import XtxMore from "@/components/library/xtxMore";
import { Link } from "react-router-dom";
import HomeGoods from "../homeGoods";
import "./index.scss";
import { useAxiosWithAuth } from "@/utils/useAxiosWidthAuth";
import useLazyData from "@/hooks/lazyData";
import { Fragment, useEffect, useRef, useState } from "react";
import LazyImage from "@/hooks/lazyImage";
interface Icate {
  id: number;
  goods: any[];
  picture: string;
  name: string;
  list: any;
  saleInfo: string;
}
function HomeProduct() {
  const axios = useAxiosWithAuth();
  const target = useRef(null);
  const [cate, setCate] = useState<Icate[]>([]);
  function getProduct() {
    return axios({
      method: "get",
      url: "/home/goods",
    });
  }
  const result: any = useLazyData(target, getProduct);
  useEffect(() => {
    setCate(result);
  }, [result]);
  return (
    <>
      <div className="home-product" ref={target}>
        {cate.length &&
          cate[0].id &&
          cate!.map((item: any) => (
            <Fragment key={item.id}>
              <XtxHomePanel
                title={item.name}
                right={
                  <>
                    <div className="sub">
                      {item.children.map((sub: any) => (
                        <Link to="/" key={sub.id}>
                          {sub.name}
                        </Link>
                      ))}
                    </div>
                    <XtxMore path="/" />
                  </>
                }
              >
                <div className="box">
                  <Link className="cover" to="/">
                    <LazyImage src={item.picture} alt="" />
                    <strong className="label">
                      <span>{item.name}馆</span>
                      <span>{item.saleInfo}</span>
                    </strong>
                  </Link>
                  <ul className="goods-list">
                    {item.goods.map((goods: any) => (
                      <li key={goods.id}>
                        <HomeGoods goods={goods} />
                      </li>
                    ))}
                  </ul>
                </div>
              </XtxHomePanel>
            </Fragment>
          ))}
      </div>
    </>
  );
}
export default HomeProduct;
